<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bibi Setup</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/global.css" />
    <script src="assets/jquery-3.7.1.min.js" ></script>
    <style>
        .logo-banner{
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
           
        }

        .loading-box{
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .more-row{
            display: flex;
            align-items: center;
        }

        .more-row .dot{
            width: 18px; height: 18px; margin-right: 5px;
        }

        #loading{
            display: none;
        }

        #loader-modify-dialog{
            background-color: rgba(0, 0, 0,0.1);
        }
        
    </style>
</head>
<body>
    <div class="main-container">
        <div class="main-box">
            <div class="body">
                <div class="logo-banner">
                    <img src="assets/image/logo.svg"  style="width: 48px; height: 48px;" /> Bibi Setup
                </div>
                <div class="loading-box">
                    <div class="spinner-border" id="loading">
                        <span class="visually-hidden">Loading...</span>
                      </div>
                </div>
                <div class="btn-box">
                    <button class="btn btn-primary btn-main" onclick="setup()">立即安装</button>    
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="agreement">
                    <label class="form-check-label" for="flexCheckDefault">
                        <a href="javascript:alert('啥协议不协议的,你就勾选一下')">同意《安装协议》</a>
                    </label>
                </div>

                <div class="more-row">
                    <img src="assets/image/help.svg" class="dot"/>
                    <a href="javascript:notice()">如何修改默认路径</a>
                </div>
                <div class="more-row">
                    <img src="assets/image/gitee.svg" class="dot" />
                    <a href="https://gitee.com/bibicms/cms3" target="_blank">帮助</a>
                </div>
           </div>      
        </div>
    </div>
    <div class="modal modal-dialog-centered" id="loader-modify-dialog" style="visibility: hidden;"  tabindex="-1">
        <div class="modal-dialog" style="width: 500px;">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">如何修改默认路径</h5>
              <button type="button" class="btn-close" id="loader-modify-dialog-close" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p>打开网站根目录下的loader.php文件进行修改</p>
              <ul>
                <li>CUBOX 框架文件夹</li>
                <li>APP 应用文件夹</li>
                <li>RUNTIME 运行文件夹</li>
                <li>CONFIG 配置文件夹</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    <script>
    function setup(){
         
        if (!$('#agreement').get(0).checked){
            alert('请先同意用户协议');
            return;
        }   

        $('#loading').show();
        $.ajax({
            url:'work/test-php.php',
            dataType:"text",
            success:function(data){
                if (data=='hello world!'){
                    location.href = 'environment.html';
                }else if (data=='loader.php'){
                    alert('未找到bibi环境，请检查安装文件位置');
                }else{
                    alert('只能安装在php环境中');
                }
            },
            error:function(data){
                alert('只能安装在php环境中');
            },
            complete:()=>{
                $('#loading').hide();
            }
        })
    }

    function notice(){
        $('#loader-modify-dialog').css('visibility','visible');
    }
    $(()=>{
        $('#agreement').get(0).checked = false;
        $('#loader-modify-dialog-close').click(()=>{
            $('#loader-modify-dialog').css('visibility','hidden');
        })
    })
    </script>

</body>
</html>